const path=require("path")
// 处理html的插件
const HtmlWebpackPlugin=require("html-webpack-plugin")
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin') 

// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') 
// 在每次编译的时候自动把之前的dist目录删除掉
const {CleanWebpackPlugin}  = require('clean-webpack-plugin')
module.exports={
    mode:"development",
      // mode:"production"
    entry:{
        commonCss:"./src/js/common-js/commonCss.js",
        dom:"./src/js/common-js/dom.js",
        http:"./src/js/common-js/http.js",
        utils:"./src/js/common-js/utils.js",
        index:"./src/js/index.js",
        login:"./src/js/login.js",
        register:"./src/js/register.js"
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"js/[name]-[hash:8].js"
    },
    module:{
        rules:[
            //配置编译css
            {
                test:/\.css$/,
                use:[
                    {
                        loader: MiniCssExtractPlugin.loader, // 提取css
                        options: {
                          publicPath: '../' // 输出路径
                        }
                      },
                    "css-loader"
                ]
            },
            //配置编译less
            {
                test:/\.less$/,
                use:[
                    {
                        loader: MiniCssExtractPlugin.loader, // 提取css
                        options: {
                          publicPath: '../' // 输出路径
                        }
                      },
                    "css-loader",
                    "less-loader"
                ]
            },
            //配置编译背景图
            {
               test:/\.(jpg|png|jpeg|gif)$/,
               loader:"url-loader" ,
               options:{
                   //配置项
                   //小于10kb 就进行 base64 转码否则级不转码 拷贝到输出目录
                   name:"[hash:10].[ext]",//图片文件长度10个字符
                   limit:10*1024,
                   esModule:false,
                   outputPath:"imgs"
               }
            },
            //加载html资源（图片，视频）
            {
                test:/\.html$/,
                loader:"html-loader"
            },
            //处理图标字体
            {
                test:/\.(eot|svg|ttf|woff|woff2)$/,
                loader:"file-loader",
                options:{
                    name:"[hash:10].[ext]",
                    outputPath:"fonts"//输出路径
                }
            },
            //把es6的代码编译成es5
            {
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node-modules/ //排除
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html",
            filename:"./index.html",
            chunks: ['index', 'commonCSS', 'dom', 'http', 'utils']
        }),
        new HtmlWebpackPlugin({
            template:"./src/login.html",
            filename:"./login.html",
            chunks: ['login', 'commonCSS', 'dom', 'http']
        }),
        new HtmlWebpackPlugin({
            template:"./src/register.html",
            filename:"./register.html",
            chunks:["register"]
        }),
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name].css' // 重命名输出的css
          }),   
          // 压缩css
          new OptimizeCssAssetsWebpackPlugin(),
          new CleanWebpackPlugin()
        ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 9527,  // 端口
        open: true // 自动打开服务
      }
}